// import React from 'react';
import React, {Component, useState, useEffect} from 'react';
import '../assets/css/Home.css';
import logo from '../assets/images/home/logo.png';
import view01 from '../assets/images/home/view_01.jpg';
import view02 from '../assets/images/home/view_02.png';
import shopGoodImg from '../assets/images/shopGoods/phone_01.png';
import {Button, Input, Carousel} from 'antd';
import {AudioOutlined} from '@ant-design/icons';
import CarouselView from '../views/home/CarouselView';

const {Search} = Input;

let CarouselImgs = [
  {
    id: 1,
    url: view01,
  }, {
    id: 1,
    url: view02,
  },
];
let shopGoodDatas = [
  {
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },{
    id: 1,
    url: shopGoodImg,
    name: "华为手机mate",
  },
];
let shopGoodsListItemArray = [
  {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  }, {
    id: 1,
    url: 'https://res.vmallres.com/pimages//pages/picImages/99501166011616110599.jpg',
  },
];
/*菜单栏*/
let categoryArray = [
  {
    id: 1,
    name: '手机',
  }, {
    id: 1,
    name: '耳机音响眼镜',
  }, {
    id: 1,
    name: '智慧屏',
  }, {
    id: 1,
    name: '笔记本',
  }, {
    id: 1,
    name: '平板',
  }, {
    id: 1,
    name: '配件',
  }, {
    id: 1,
    name: '生态产品',
  }, {
    id: 1,
    name: '美食酒饮',
  }, {
    id: 1,
    name: '增值服务',
  },
];

function Index(props) {
  const onSearch = value => console.log(value);
  const contentStyle = {
    height: '500px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };
  const [comData, setcomData] = useState({
    showList:false,//菜单栏显示
    showListIndex:1,//菜单栏显示
    name:"就放假放假放假",//菜单栏显示
    currentIndex:null,
    saveCurrentIndex1:1,
  });
  let  handleMenu = (val,index)=>{
    console.log(comData.showListIndex);
    if(val&&index !=null){
      setcomData({
        showList:true,
        currentIndex:index,
        // saveCurrentIndex:index,
      })
      console.log(index);

    }else {
      setcomData({
        showList:false,
        // currentIndex:index
      })
    }

  }
  const handleMenuShow = (val,saveIndex)=>{
    console.log(saveIndex);
    if(val){
      console.log(comData.saveCurrentIndex1);

      setcomData({
        showList:true,
        currentIndex:saveIndex,
      })
    }else {
      setcomData({
        showList:false,
        // currentIndex:index
        currentIndex:null
      })
    }
  }
  return (
      <div>
        <div>
          {/*头部导航栏*/}
          <div className="handerBox">
            <div className="handerBox-leftCtl">
              <div className="handerBox-left">
                <div className={'handerBox-ul'}>
                  <span className={'handerBox-li'}>首页</span>
                  <span className={'handerBox-li'}>官网</span>
                  <span className={'handerBox-li'}>花粉俱乐部</span>
                </div>

              </div>

            </div>
            <div className="handerBox-rightCtl">
              <div className="handerBox-right">
                <div className={'handerBox-ul'}>
                  <span className={'handerBox-li'}>请登录</span>
                  <span className={'handerBox-li'}>注册</span>
                  <span className={'handerBox-li'}>我的订单</span>
                  <span className={'handerBox-li'}>购物车</span>
                </div>
              </div>

            </div>

          </div>

        </div>
        {/*菜单导航栏*/}
        <div>
          <div className="logo-search">
            <div className="logo-searchCtl01">
              <div className="logo-searchCtl01-box">
                <img className={'logoStyle'} src={logo} alt=""/>
              </div>
            </div>
            <div className="logo-searchCtl02">
              <div className="logo-searchCtl02-box">
                <div className={'logo-searchCtl02-box-ul'}>
                  <Button type="primary">华为专区</Button>

                  <span className={'logo-searchCtl02-box-li'}>莫塞尔专区</span>
                  <span className={'logo-searchCtl02-box-li'}>场景购</span>
                  <span className={'logo-searchCtl02-box-li'}>智慧生活</span>
                </div>
              </div>
            </div>
            <div className="logo-searchCtl03">
              <div className="logo-searchCtl03-box">
                <div className="logo-searchCtl03-boxSearch">
                  <Search
                      placeholder="MEIT系列 荣耀"
                      allowClear
                      onSearch={onSearch}
                      style={{width: 200, margin: '0 10px'}}
                  />
                </div>

              </div>
            </div>

          </div>
        </div>
        {/*轮播图*/}

        <div className="lbtBox">
          {/* <Carousel autoplay style={{height: 500}}>
            {
              CarouselImgs.map((item, index) => {
                return <div>
                  <h3 style={contentStyle}>
                    <img src={item.url} alt=""/>
                  </h3>
                </div>;
              })
            }
          </Carousel>*/}
          <CarouselView></CarouselView>
          {/*悬浮菜单栏区域*/}
          <div className="category">
            <div className="category-list">
              <div className="category-list-box">
                {
                  categoryArray.map((item, index) => {
                    return <div
                                className={`category-item ${index===comData.currentIndex?"category-item-active":null}`}
                                onMouseOver={()=>handleMenu(true,index)} onMouseLeave={()=>handleMenu(false,null)}>
                      <div className="category-itemBox">
                        <div className="category-item-left">{item.name}</div>
                        <div className="category-item-right">》</div>
                      </div>
                    </div>;
                  })
                }
              </div>
            </div>
          </div>
          <div className="category-right" style={{display:(comData.showList == true)?'block':'none'}}>
            <div className="category-right-list"onMouseOver={()=>handleMenuShow(true,comData.showListIndex)} onMouseLeave={()=>handleMenuShow(false,null)}>
              <div className="category-right-list-box">

                {
                  shopGoodDatas.map(item =>{
                    return  <div className="category-right-list-box-item">
                      <div className="category-right-list-item-img">
                        <img className="category-right-list-item-imgStyle"
                             src={shopGoodImg} alt=""/>
                      </div>
                      <div className="category-right-list-item-name">{item.name}</div>
                    </div>
                  })
                }
              </div>

            </div>
          </div>
        </div>


        {/*商品列表*/}
        <div className="shopGoodsList">
          {
            shopGoodsListItemArray.map((item, index) => {
              return <div className="shopGoodsListItem">

                <img className="shopGoodsListItemImg" src={item.url} alt=""/>

              </div>;

            })
          }


        </div>
      </div>
  );

}

export default Index;
